<template>
  <el-container class="admin">
    <!-- 头部 -->
    <el-header class="header ub main-justify cross-center">
      <div class="header-left-text">物业管理系统后台</div>
      <div class="ub main-center cross-center">
        <div>
          <el-dropdown placement="bottom-start">
            <img class="user-img" src="../assets/images/avatar.png" alt="用户头像" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="user-role">
          <div class="header-wellcome">欢迎你，管理员</div>
          <div class="header-time">{{homeDate}}</div>
        </div>
      </div>
    </el-header>
    <!-- 尾部 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="auto">
        <menu-bar></menu-bar>
      </el-aside>
      <!-- 内容区 -->
      <el-container>
        <el-main style="padding: 0; background-color: #EEEEEE">
          <i
            class="arrow-icon"
            :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
            @click="arrowBtn"
          ></i>
          <tabs></tabs>
          <router-view></router-view>
        </el-main>
        <el-footer
          class="ub main-center cross-center"
          style="background-color: #3399CC;"
        >Copyright&copy;2020 肇庆学院</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import MenuBar from "../components/MenuBar.vue";
import Tabs from "../components/Tabs.vue";
export default {
  components: {
    MenuBar,
    Tabs,
  },
  computed: {
    isCollapse: {
      get() {
        return this.$store.state.MenuStore.isCollapse;
      },
      set(val) {
        this.$store.state.MenuStore.isCollapse = val;
      },
    },
  },
  data() {
    return {
      homeDate: "",
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.showDate();
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    arrowBtn() {
      this.$store.commit("setMenuBarOpenOrClose");
    },
    showDate() {
      var week = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      this.homeDate = year + "." + (month < 10 ? "0" + month : month) + "." + day + " " + hours + ":" + minutes + ":" + (seconds < 10 ? "0" + seconds : seconds) + " " + (week[date.getDay()] || " ");
    },
  },
};
</script>

<style lang="scss" scoped>
.admin {
  height: 100%;
  text-align: left;
}
.header {
  background-color: #167bd8;
  color: #fff;
  padding: 0 20px;
}
.header-left-text {
  font-size: 22px;
}
.user-img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  cursor: pointer;
}
.header-wellcome {
  font-size: 15px;
  font-weight: bolder;
}
.header-time {
  margin-top: 2px;
  font-size: 14px;
}
.user-role {
  margin-left: 10px;
}
.arrow-icon {
  float: left;
  background: #eaedf1;
  border: 1px solid transparent;
  font-size: 24px;
  height: 40px;
  line-height: 40px !important;
  width: 40px;
  text-align: center;
}
.el-container /deep/ .el-tabs__header {
  position: static !important;
}
</style>